<template>
    <section>
        <el-dialog title="修改" :visible.sync="dialogFormVisible">

            <el-form :model="addForm" ref="addForm">
                <el-form-item label="机构名称" label-width="120px">
                    <el-input v-model="addForm.companyName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="机构类型" label-width="120px">
                    <el-select placeholder="请选择" v-model="addForm.tenantTypeId">
                        <el-option v-for="o in options" :key="o.id" :label="o.name" :value="o.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="营业执照" label-width="120px">
                    <el-input v-model="addForm.companyNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="公司地址" label-width="120px">
                    <el-input v-model="addForm.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="LOGO" label-width="120px">
                    <el-input v-model="addForm.logo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm()">取 消</el-button>
                <el-button type="primary" @click="onSubmit('addForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :model="filters" :inline="true">
                <el-form-item>
                    <el-input v-model="filters.keywords" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getTenants">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表v-loading="listLoading"-->
        <el-table :data="tenants" v-loading="listLoading" highlight-current-row style="width: 100%;">
            <!--多选框-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!--索引值,为什么不用id,id不序号-->
            <el-table-column type="index" width="60">
            </el-table-column>
            <!--其他都设置值,只有一个不设置值就自动适应了-->
            <el-table-column prop="companyName" label="机构名称">
            </el-table-column>
            <el-table-column prop="tenantType.name" label="机构类型">
            </el-table-column>
            <el-table-column prop="companyNum" label="营业执照">
            </el-table-column>
            <el-table-column prop="address" label="公司地址">
            </el-table-column>
            <el-table-column prop="employee.username" label="管理员">
            </el-table-column>
            <el-table-column prop="logo" label="LOGO">

            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>

    </section>
</template>

<script>
    export default {
        data() {
            return {
                options: [],
                dialogFormVisible: false,
                listLoading: false,
                //查询对象
                filters: {
                    keywords: ''
                },
                page: 1,//当前页,要传递到后台的
                total: 0, //分页总数
                tenants: [], //当前页数据
                addForm: {
                    id: "",
                    companyName: "",
                    tenantTypeId: "",
                    companyNum: "",
                    address: "",
                    logo: ""
                },
            }
        },
        methods: {
            add() {
                this.dialogFormVisible = true
                //清空表单
                for (let i in this.addForm) {
                    // console.log(addFormKey)
                    this.addForm[i] = ""
                }
                this.$http.get("/system/tenantType").then(result => {
                    this.options = result.data
                    console.log(this.options)
                });

            },
            edit(row) {
                this.dialogFormVisible = true
                this.$http.get("/system/tenantType").then(result => {

                    this.options = result.data
                });
                console.log(row)
                this.addForm.companyName=row.companyName
                this.addForm.tenantTypeId=row.tenantType.id
                this.addForm.companyNum=row.companyNum
                this.addForm.address=row.address
                this.addForm.logo=row.logo
                this.addForm.id=row.id
            },
            onSubmit() {
                console.log(this.addForm)
                this.$http.put("/system/tenant", this.addForm).then(result => {
                    this.getTenants()
                    this.dialogFormVisible = false
                })
            },
            //重置。点击取消
            resetForm() {
                this.dialogFormVisible = false
            },
            //删除
            del(row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//确认
                    this.$http.delete("/system/tenant/" + row.id).then(res => {
                        console.log(res);
                        let {message, success} = res.data; //解构函数
                        if (success) {
                            this.$message({
                                message: message,
                                type: 'success'
                            });
                            this.getTenantTypes()
                        }
                    })
                }).catch(() => {
                    this.$message('已经取消');
                })
            },
            handleCurrentChange(curentPage) {
                this.page = curentPage;
                this.getTenants();
            },
            getTenants() {
                //发送Ajax请求后台获取数据  axios
                //添加分页条件及高级查询条件
                let para = {
                    "page": this.page,
                    "keyword": this.filters.keywords
                };
                this.listLoading = true; //显示加载圈
                //分页查询
                this.$http.post("/system/tenant/list", para) //$.Post(.....)
                    .then(result => {
                        this.total = result.data.total;
                        this.tenants = result.data.rows;
                        this.listLoading = false;  //关闭加载圈
                    });
                /* 查询所有
                this.$http.patch("/department",para) //$.Post(.....)
                    .then(result=>{
                        console.log(result);
                        console.log(result.data);
                        this.tenants = result.data;
                        this.listLoading = false;  //关闭加载圈
                    });
                    */
            }
        },
        mounted() {
            this.getTenants()
        }
    }

</script>

<style scoped>

</style>